<template>
<div>
    <div class="headtitle"> 
       {{title}}
    </div>
    <div class="conditionForm"> 

    <el-form :inline="true" ref="queryForm" :model="queryForm">
 <el-form-item label="用户名">
    <el-input v-model="queryForm.username" placeholder=""></el-input>
  </el-form-item>
   <el-form-item label="电话">
    <el-input v-model="queryForm.mobile" placeholder=""></el-input>
  </el-form-item>
     <el-form-item label="邮箱">
    <el-input v-model="queryForm.email" placeholder=""></el-input>
  </el-form-item>
    <el-form-item label="创建时间" style="width: 60%">
      <el-col :span="12">
      <el-date-picker type="date" v-model="queryForm.startTime" placeholder=""  ></el-date-picker>
    </el-col>
      <el-col :span="12">
      <el-date-picker type="date" v-model="queryForm.endTime" placeholder=""  ></el-date-picker>
    </el-col>
  </el-form-item>
    <el-form-item label="用户状态">
      <el-select v-model="queryForm.status" clearable="true" placeholder="用户状态">
      <el-option label="使用中" value="true"></el-option>
      <el-option label="冻结中" value="false"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button @click="getList()" type="primary">查询</el-button>
  </el-form-item>
    <el-form-item>
    <el-button @click="showAddDialog()" type="primary">新增</el-button>
  </el-form-item>
  </el-form>

  </div>
  
  
     <div class="table">
    <el-table
      :data="tableData"
      border
      style="width: 100%;text-align:center">

      <el-table-column
        prop="id"
        label="用户UID"
        width="300px"
        >
      </el-table-column>

       <el-table-column
        prop="username"
        label="用户名"
       >
      </el-table-column>

       <el-table-column
        prop="mobile"
        label="电话"
        >
      </el-table-column>
              <el-table-column
        prop="email"
        label="邮箱"
        >
      </el-table-column>
             <el-table-column
        prop="createTime"
        label="创建时间"
        >
      </el-table-column>
             <el-table-column
        prop="status"
        label="用户状态"
        >
      </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="showEditDialog(scope.row)" type="text" size="small">修改</el-button>   
        <el-button @click="doDelete(scope.row)" type="text" size="small">删除</el-button>      
      </template>
    </el-table-column>
    </el-table>
 <el-pagination class="pageSty"
  background
  layout="prev, pager, next"
  :current-page.sync="queryForm.pageNo"
  :page-size="queryForm.pageSize"
  :total="queryForm.recordTotal"
  @current-change="handleCurrentChange"
  >
   </el-pagination>

     </div>
   <el-dialog title="添加用户" :visible.sync="dialogAddFormVisible">
        <el-form :inline="true" ref="dataForm" :model="dataForm" label-width="120px">
    <el-form-item  label="用户名">
    <el-input v-model="dataForm.username"></el-input>
  </el-form-item>
 <el-form-item  label="密码">
    <el-input type="password" v-model="dataForm.password"></el-input>
  </el-form-item>
   <el-form-item  label="电话号码">
        <el-input v-model="dataForm.mobile"></el-input>
  </el-form-item>
   <el-form-item  label="邮箱">
    <el-input v-model="dataForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="doAdd()">添加</el-button>
 <el-button @click="dialogAddFormVisible = false" >关闭</el-button>
  </el-form-item>
</el-form>
  </el-dialog>

 <el-dialog title="修改用户" :visible.sync="dialogEditFormVisible"> 
        <el-form :inline="true" ref="dataForm" :model="dataForm" label-width="120px">
    <el-form-item  label="用户名">
    <el-input v-model="dataForm.username"></el-input>
  </el-form-item>
 <el-form-item  label="密码">
    <el-input type="password" v-model="dataForm.password"></el-input>
  </el-form-item>
   <el-form-item  label="电话号码">
        <el-input v-model="dataForm.mobile"></el-input>
  </el-form-item>
   <el-form-item  label="邮箱">
    <el-input v-model="dataForm.email"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="doEdit()">修改</el-button>
 <el-button @click="dialogEditFormVisible = false" >关闭</el-button>
  </el-form-item>
</el-form>
  </el-dialog>
  
     
</div>
 
</template>
    
<script>
import {getUserListByCondition,getUserById,addUser,editUser,removeUser} from '../../api/User/user'
import { encrypt, decrypt } from '../../utils/encryption'
 export default {
     name:'UserTable',
      data() {
        return {
            title:'用户管理',
            queryForm:{
            pageNo: 1,
            pageSize: 18,
            recordTotal: 100
            },
            dialogAddFormVisible:false,
            dialogEditFormVisible:false,
              dataForm:{},
            tableData: []
        
        }
      },
          methods: {
              getList(){
           var _this=this;
          getUserListByCondition(_this.queryForm).then((res)=>{
            if(res.flag){
                   _this.tableData=res.data.result;
                }
                 _this.queryForm.recordTotal=res.data.recordTotal;
          }).catch((err)=>{
          console.log(err)
          })     
              },
              doDelete(userinfo){
                  removeUser(userinfo.id).then((res)=>{
                    if(res.flag){
                      this.getList()
                    }
                  })
              },
               handleCurrentChange(currentPage){
              this.queryForm.pageNo=currentPage
              this.getList()
             },
               showAddDialog(){
                 this.dataForm={}
              this.dialogAddFormVisible = true
             },
             doAdd(){
               addUser(encrypt(JSON.stringify(this.dataForm))).then((res)=>{
                 if(res.flag){
                   this.getList();
                   this.dialogAddFormVisible = false;
                 }
               })
             },
             showEditDialog(userinfo){
               this.dataForm={}
               getUserById(userinfo.id).then((res)=>{
                 if(res.flag){
                   this.dataForm = res.data
                    this.dialogEditFormVisible = true
                 }
               })
                 },
            doEdit(){
                   editUser(encrypt(JSON.stringify(this.dataForm))).then((res)=>{
                     if(res.flag){
                       this.getList();
                        this.dialogEditFormVisible = false;
                     }
                   })
                 }  
          },
          created() {
            this.getList();
          }
    }
</script>
<style scoped>
.headtitle{
    text-align: left;
    padding: 5px;
    border-bottom: 1px lightgrey solid;
    color: gray;
}
.conditionForm{
     width: 80%;
    margin: 50px auto 0px auto;
}
.table{
    text-align: center !important;
    
}
.pageSty
{
  position:absolute;
  left: 75%;
  bottom:5%;
}
</style>